import React from 'react'
import ReactDOM from 'react-dom'

import Child1234,{Child2} from './2_组件'
// import {a,b} from './2_组件'
// console.log(a,b)
// jsx语法中 不能编写  class属性 需要写成className; 行内属性for 需要写成  htmlFor
// jsx中 编写变量 需要使用 {}  不管事在行内属性 还是结构内容 都是 {} 
//        {表达式 不能写语句} 类比于  vue的 {{}}
//        只要是想在 结构中编写 表达式或者变量  都需要使用 {}
//  行内样式  必须写成 对象的格式
// 可以使用 三元表达式 来实现 类似vue的v-if
// 只能使用 行内样式 来实现  vue的  v-show
// react 中 使用 map 来实现  v-for
// 不要 吧 普通对象  放到结构(不是行内属性)中；
// dangerouslySetInnerHTML={{__html:'<li>edrgedtr</li>'}}    v-html

// var  str  = '你好'
// var ary = [1,2,3,4,5,6];
// function fn(arr){
//   let temp = [];
//   for(let i = 0 ; i < arr.length ; i++){
//     temp.push(<li key={i}>{arr[i]}</li>)
//   }
//   return temp;
// }
// let ary2 = [<li key={100}>100</li>,<li key={200}>200</li>,<li key={300}>300</li>]
// function Hello(){
//   var sty = {color:'red'}
//   // var str = '他好'
//   let ary3 = ary.map((item,index)=><li key={index}>{item}</li>)
//   return <div className='box' style={sty}>
//     哈哈哈
//     {1 > 2 ? <span>{str}</span> : <i>{str+'hello'}</i>}
//     <h2 style={{display:1>2 ? "block" : 'none'}}>hahaha</h2>
  
//     <ul>
//       {
//         ary.map((item,index)=><li key={index}>{item}</li>)
//       }
//       {
//         ary3
//       }
//       {
//         fn(ary)
//       }
//       {
//         ary2
//       }
//     </ul>
//     <input type="radio" name="qqq" id="qqq"/><label htmlFor="qqq">哈哈哈</label>
//   </div>
// }

function App(){
  var str = 'box'
  return <>
    <h1>{str}</h1>
    <Child1234 className={str}  class='qqq' style='12356'/>
    <Child2 className={str}/>
  </>
}


ReactDOM.render(<App/>,document.querySelector('#root'))